<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闹钟</title>
    <style>
        html {
            background: #CCCCFF;
            font-size: 10px;
        }
        body {
            height: 100vh;
            margin: 0;
            font-size: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .clock {
            width: 30rem;
            height: 30rem;
            border: 7px solid #ffebdb;
            border-radius: 50%;
            box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.1),
                        inset 4px 4px 10px rgba(168, 145, 128, 0.6),
                        inset -4px -4px 10px rgba(201, 175, 155, 0.2),
                        4px 4px 10px rgba(168, 145, 128, 0.6);
            background-image: url("./1.png");
            background-size: 108%;
            padding: 2rem;
        }

        .outer-clock-face {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .outer-clock-face::before,
        .outer-clock-face::after {
            content: '';
            width: 10px;
            height: 100%;
            background: #f303f3;
            border-radius: 8px;
        }
        .outer-clock-face::after {
            transform:rotate(90deg);
        }
        .marking {
            width: 3px;
            height: 100%;
            background: #ecfc07;
            position: absolute;
        }
        .marking-one {
            transform: rotateZ(30deg);
        }
        .marking-two {
            transform: rotateZ(60deg);
        }
        .marking-three {
            transform: rotateZ(120deg);
        }
        .marking-four {
            transform: rotateZ(150deg);
        }
        .inner-clock-face {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            background-color: #fffebd;
            z-index: 2;
            border-radius: 50%;
            background-image: url("./1.png");
            background-size: 108%;
        }
        .inner-clock-face::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #4d4b63;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .hand {
            width: 50%;
            height: 6px;
            background: red;
            border-radius: 6px;
            position: absolute;
            top: 50%;
            right: 50%;
            margin-top: -3px;
            transform-origin: 100% 50%;
            transform: rotate(90deg);
        }
        .hour-hand{
            width: 30%;
        }
        .min-hand {
            width: 40%;
            height: 3px;
        }
        .second-hand {
            background: #f20afa;
            width: 45%;
            height: 2px;
        }

    </style>
    <body>
        <div class="clock">
            <div class="outer-clock-face">
                <div class="marking marking-one"></div>
                <div class="marking marking-two"></div>
                <div class="marking marking-three"></div>
                <div class="marking marking-four"></div>

                <div class="inner-clock-face">
                    <div class="hand hour-hand"></div>
                    <div class="hand min-hand"></div>
                    <div class="hand second-hand"></div>
                </div>
            </div>
        </div>

        <script>
            const secondHand = document.querySelector('.second-hand')
            const minHand = document.querySelector('.min-hand')
            const hourHand = document.querySelector('.hour-hand')

            function setTime() {
                const now = new Date();
                const seconds = now.getSeconds();
                const secondsDegrees = seconds *6 + 90;
                secondHand.style.transform = `rotate(${secondsDegrees}deg)`

                const mins = now.getMinutes();
                const minsDegrees = mins * 6 + 90;
                minHand.style.transform = `rotate(${minsDegrees}deg)`

                const hour = now.getHours()
                const hourDegrees = hour * 30 + 90 + (mins / 60) * 30
                hourHand.style.transform = `rotate(${hourDegrees}deg)`
            }

            setTime();
            setInterval(setTime,1000)
        </script>
    </body>
</head>
</html>